<template>
<div class="top">
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-input placeholder="请输入搜索内容"  v-model="things.thing" clearable @clear="getInvitationList()" style="margin-bottom: 15px;margin-top: 15px"> <!-- 将value和query双向绑定 点击搜索就发送请求 请求相应的数据 放到userlist里 如果默认不搜索就是请求所有的数据 同时加上clearble属性 使得点击可以清除输入内容 于是触发clear事件 监听事件让下面显示所有数据 -->
          <el-button slot="append" icon="el-icon-search" @click="searchInvitatonByContentOrTitle"></el-button>
        </el-input>
      </el-col>
      <el-col :span="8">
        <div class="comment-header clearfix" style="margin-top: 35px" >
          <el-radio v-model="radio" label="1" @change="getInvitationList()">按热度排序</el-radio>
          <el-radio v-model="radio" label="2" @change="getInvitationList()">按时间排序</el-radio>
        </div>
      </el-col>
    </el-row>

  <div class="invitationLists" v-for="(item,index) in invitationList" v-bind:key="index" >
    <div class="Col_left" @click="getInvitationInfoDetail(item)">
    <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
    </div>
    <div class="Col_mid">
      <div class="Col_mid_top">
        <span class="Col_mid_top_title">
          <span v-for="(item2,index) in item.topics" v-bind:key="index">
            <span @click="showTopicInfo(item2)" class="invitationTopic">#{{item2.topicName}}# </span>
          </span>
         <span class="inviTitle" @click="getInvitationInfoDetail(item)">
           {{item.inviTitle}}
         </span>
        </span>
        <span class="Col_mid_top_writer">
           <i class="el-icon-user"></i>
           {{ item.schoolUser.nickname }}</span>
      </div>
      <div class="Col_mid_under">
        <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item)">
          {{item.inviContent}}
        </div>
<!--        <div class="Col_mid_under_pic"></div>-->
        <div class="Col_mid_under_mid">
          <div class="Col_mid_under_right_zan">
            <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
            <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
          </div>
        </div>
        <div class="Col_mid_under_right">
          <span class="Col_mid_under_right_time">{{item.createTime}}</span>
        </div>
      </div>
    </div>
    <div class="Col_right">
      <el-dropdown trigger="click" class="deleteInvitation">
  <span class="el-dropdown-link">
    操作<i class="el-icon-caret-bottom el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix" >
            <span @click="deleteInvationById(item.inviId)">删除帖子</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
    <!-- 查看帖子详情对话框 -->
    <el-dialog   :visible.sync="disabled" @close="handClose()"  width="800px" :append-to-body="true" :estroy-on-close="true">
      <div class="userInfoHeader">
        <el-avatar class="userIcon" :size="50" :src="topic.topicIcon"></el-avatar>
        <div class="nickname_signature">
          <div class="userNickname"> #{{ topic.topicName}}#</div>
          <div class="userSignature" style="margin-bottom: 10px">话题描述：{{ topic.topicDescr }}</div>
          话题发帖数<i class="iconfont icon-tiezi"> {{topic.inviNum}}</i>
        </div>
        <div class="time">
          <div class="createTime">话题创建时间：{{ topic.createTime }}</div>
          <div class="updateTime">最近更新时间：{{ topic.updateTime }}</div>
        </div>
      </div>
      <div class="userInfoMain">
        <el-tabs class="invitation" type="border-card">
          <el-tab-pane label="帖子">
            <div class="content" v-if="this.invitationListTopic.length>0">
              <div class="invitationContent" v-for="(item,index)  in invitationListTopic" v-bind:key="index">
                <div class="Col_left" @click="getInvitationInfoDetail(item)">
                  <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
                </div>
                <div class="Col_mid">
                  <div class="Col_mid_top">
        <span class="Col_mid_top_title">

<!--          <span v-for="(item2,index)  in item.topics" v-bind:key="index">-->
          <!--            <span class="invitationTopic">#{{item2.topicName}}# </span>-->
          <!--          </span>-->
         <span class="inviTitle" @click="getInvitationInfoDetail(item)">
           {{item.inviTitle}}
         </span>
        </span>
                  </div>
                  <div class="Col_mid_under">
                    <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item)">
                      {{item.inviContent}}
                    </div>
                    <!--        <div class="Col_mid_under_pic"></div>-->
                    <div class="Col_mid_under_mid">
                      <div class="Col_mid_under_right_zan">
                        <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
                        <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
                      </div>
                    </div>
                    <div class="Col_mid_under_right">
                      <span class="Col_mid_under_right_time">{{item.createTime}}</span>
                    </div>
                  </div>
                </div>
                <div class="Col_right">
                  <el-tooltip effect="dark" class="deleteInvitation" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTopic(item.inviId)"></el-button>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div class="tipsNoInvitation" v-else>该话题暂无帖子讨论</div>
            <div class="page">
              <el-pagination
                @current-change="handleUserInvitationPageCurrentChange"
                :current-page.sync="things2.page"
                :page-size="4"
                layout="total, prev, pager, next"
                :total="invitationSize">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
<!--   分页区域-->
    <div style="background-color: white">
  <el-pagination style="margin: 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="things.page" :page-sizes="[1, 2, 5, 10]" :page-size="things.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> <!-- layout表示显示哪些东西 -->
  </el-pagination>
  </div>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      disabled: false,
      invitationList: [],
      things: {
        page: 1,
        pageSize: 10,
        sortOrder: '',
        thing: ''
      },
      invitation: {
        agreeNum: -1,
        browseNum: -1,
        buildId: -1,
        commentNum: -1,
        inviContent: '',
        inviTitle: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicList: '',
        userId: -1
      },
      schoolUser: {
        banTime: -1,
        ban_day: -1,
        birthday: '',
        city: '',
        gender: -1,
        headPortrait: '',
        invitationNumber: -1,
        nickname: '',
        page: 1,
        pageSize: 2,
        signature: '',
        sortOrder: ''
      },
      userlist: [],
      // 异步搜索数据内容
      isshow: false,
      selectUsers: [],
      query: '',
      total: 0,
      radio: '1',
      invitationListTopic: [],
      invitationSize: 0,
      topic: {
        createTime: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      },
      things2: {
        page: 1,
        pageSize: 4,
        sortOrder: 'topic_list',
        thing: '1'
      }
    }
  },
  methods: {
    async getInvitationList () {
      if (this.radio === '1') { this.invitation.sortOrder = 'comment_num' } else {
        this.invitation.sortOrder = 'create_Time'
      }
      const { data: res } = await this.$http.post('invitation/selectInviteByAccurate/', this.invitation)
      console.log(res)
      if (res.status !== 200) {
        return this.$message.error('获取贴子列表失败！')
      }
      this.invitationList = res.data.list
      this.total = res.data.total
    },
    // 用于改变面包屑导航栏
    changeBread () {
      document.getElementById('first').innerHTML = '帖子管理'
      document.getElementById('second').innerHTML = '帖子列表'
      document.getElementById('separate_1').innerHTML = '/'
      document.getElementById('separate_2').innerHTML = '/'
    },
    // 搜索帖子
    async searchInvitatonByContentOrTitle () {
      const { data: res } = await this.$http.post('invitation/selectInviteByVague/', this.things)
      if (res.status !== 200) {
        return this.$message.info('无相关贴子！')
      }
      this.$message.success('查询成功！')
      console.log(res)
      this.invitationList = res.data.list
      this.total = res.data.total
    },
    async deleteInvationById (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      await this.getInvitationList()
      this.$message.success('删除成功！')
    },
    getTopicInfo (topicId) {
      alert(topicId)
    },
    getInvitationInfoDetail (invitation) {
      const id = invitation.inviId
      this.$router.push({
        path: '/invitations/content/',
        component: 'invitationContent',
        query: {
          inviId: id
        }
      })
    },
    handleSizeChange (newSize) {
      this.invitation.pageSize = newSize
      this.getInvitationList()
    },
    // 监听 页码值 改变的事件 newPage为选择的页码值 选择了第几页就把这个页码作为参数传给数据请求中重新请求
    handleCurrentChange (newPage) {
      this.invitation.page = newPage
      this.getInvitationList()
    },
    selectInput (event) {
      this.things.thing = event.target.innerHTML
      this.query = event.target.innerHTML
      this.isshow = false
      this.searchInvitatonByContentOrTitle()
    },
    async getTopicInvitation (topicId) {
      this.invitationListTopic = []
      this.things2.thing = topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    showTopicInfo (item) {
      this.topic = item
      this.disabled = true
      this.getTopicInvitation(item.topicId)
    },
    handleUserInvitationPageCurrentChange (newPage) {
      this.things2.page = newPage
      this.getTopicInvitation2()
    },
    async getTopicInvitation2 (topicId) {
      // this.dataInvitation = []
      // alert(1)
      this.things2.thing = this.topic.topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      console.log(res)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    handClose () {
      this.disabled = false
    },
    async deleteTopic (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功！')
      this.getTopicInvitation2()
    }
  },
  created () {
    this.getInvitationList()
  },
  mounted () {
    this.changeBread()
  }
}
</script>

<style scoped>
@import "../../assets/css/topicDialog.css";
.threadlist_rep_num {
  display: inline-block;
  width: 50px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  background: url(//tb2.bdstatic.com/tb/img/f_reply_bg_8ec77f0.png) no-repeat;
  margin-top: 10px;
  margin-left: 18%;
}
.Col_left{
  float: left;
  width: 10%;
}
.Col_mid{
  height: auto;
  width: 70%;
  float: left;
  padding-top: 8px;
}
.Col_right{
  float: left;
  height: 100px;
  width: 20%;
}
.invitationLists{
  width: 100%;
  display: block;
  left: 20vh;
  height: 100px;
  border: 1px solid #E4E6EB;
  background-color: white;
}
.invitationLists:hover{
  background-color:#F1F3F4;
  cursor: pointer;
}
.Col_mid_top_title{
 width: 50%;
  font-size: 20px;
  color: #2D64B3;
}
.Col_mid_top_writer{
  width: 50%;
  color: #9E9E9E;
  float: right;
  font-size: 15px;
}
.Col_mid_under_invitationContent{
  width: 50%;
  float: left;
}
.Col_mid_under_mid{
  width: 25%;
  height: 50px;
  float: left;
  color: #9E9E9E;
}
.deleteInvitation{
  margin-top: 20%;
  margin-left: 30%;
}
.Col_mid_under_right {
  width: 25%;
  height: 50px;
  float: right;
  color: #9E9E9E;
  font-size: 15px;
}
.Col_mid_under_right_time{

}
.el-dropdown-link{
  color: #2D64B3;
}
.invitationTopic:hover{
  text-decoration:underline;
}
.inviTitle:hover{
  text-decoration:underline;
}
.Col_mid_under_invitationContent{
  margin-top: 10px;
  white-space: nowrap;/*内容超宽后禁止换行显示*/
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/*文字超出部分以省略号显示*/
}
.sub-title li{
  margin-top: 5px;
}
.sub-title li:hover{
  cursor: pointer;
  background-color: #F5F7FA;
  color: #409CFF;
}
.main{
  /*position: absolute;*/
  /*height: 100vh;*/
    width: 1055px;
    margin: auto;
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/

}
.top{
  background-color: #F7F7F7;
  height: 100vh;
}
</style>
